<template>
    <div class="modal fade" id="search_equip" tabindex="-1" role="dialog"
         aria-labelledby="search_equip">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="searchFor_box">
                        <div class="g-form-line">
                            <div class="searchFor_left">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">
                                            <img src="../../assets/images/home_image/close.png" alt="" class="closeBtn">
                                        </span>
                                </button>
                                <p>搜设备</p>
                            </div>
                            <div class="searchFor_right">
                                <p class="top_text">搜索到名为 <span>{{ equipData.equipName }}</span> 的1条记录:</p>
                                <div class="table_box">
                                    <table class="table_top">
                                        <thead>
                                        <tr class="table_nav">
                                            <th>设备名</th>
                                            <th>IMEI号</th>
                                            <th>所属用户</th>
                                            <th>修改时间</th>
                                            <th>设备转移</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr class="table_content">
                                            <td>{{ equipData.equipName }}</td>
                                            <td>{{ equipData.imei }}</td>
                                            <td>{{ userInfo.userNickname }}</td>
                                            <td>{{ equipData.updateTime}}</td>
                                            <td class="dropdown">
                                        <span class="dropdown-toggle" data-toggle="dropdown"
                                              aria-haspopup="true" aria-expanded="true">转移</span>
                                                <ul class="dropdown-menu ">
                                                    <li v-for="sub in userData">
                                                        <a href="javascript:void (0)" @click="transfer(sub, equipData)">
                                                            {{ sub.userName }}
                                                        </a>
                                                    </li>
                                                </ul>
                                            </td>
                                            <td><span @click="editSearchEquips">编辑</span>
                                                |
                                                <span @click="deleteEquip">删除</span>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <p class="top_text_text">所属客户：</p>
                                <table class="table_button">
                                    <thead>
                                    <tr class="table_nav">
                                        <th>客户名称</th>
                                        <th>登录账号</th>
                                        <th>联系人</th>
                                        <th>电话</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>{{ userInfo.userNickname }}</td>
                                        <td>{{ userInfo.userEmail }}</td>
                                        <td>{{ userInfo.linkman }}</td>
                                        <td>{{ userInfo.dealerPhone }}</td>
                                        <td>
                                            <span @click="showCustomer">查看</span>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            //将父组件的设备传到子组件客户名，
            userData: {
                type: Array,
                default: {}
            }
        },
        data () {
            return {
                equipData: {},
                userInfo: {}
            }
        },
        methods: {
            // 表格转移
            transfer (user, equip) {
                if (user.userId === undefined || equip.id === undefined) {
                    this.$store.commit('showAlert', {error: '无效设备或无效客户'})
                    return
                }
                let data = {
                    id: equip.id,
                    newDealerId: user.userId
                }
                this.$ajax
                    .equip
                    .singleMove(data)
                    .then(res => {
                        let result = res.data
                        if (result.code === 200) {
                            this.$emit('refreshMenu')
                            this.$store.commit('showAlert', {success: this.$msgDictionary.operationSuc})
                        } else if (result.code === 408) {
                            this.$store.commit('showAlert', {error: this.$msgDictionary.loginGetaway})
                            let timer = setTimeout(() => {
                                clearTimeout(timer)
                                $('#msgModal').modal('hide')
                                this.$router.push({path: '/login'})
                            }, 2000)
                        } else {
                            this.$store.commit('showAlert', {error: result.msg})
                        }
                    }, () => {
                        this.$store.commit('showAlert', {error: this.$msgDictionary.serviceException})
                    })
            },
            //获取搜索的设备数据
            getData (data) {
                this.equipData = data
                if (data.dealerId) {
                    this.$ajax
                        .userInfo
                        .getUserInfo(data.dealerId)
                        .then((res) => {
                            let data = res.data
                            if (data.code === 200) {
                                this.userInfo = data.result
                            } else if (data.code === 408) {
                                this.$store.commit('showAlert', {error: this.$msgDictionary.loginGetaway})
                                let timer = setTimeout(function () {
                                    clearTimeout(timer)
                                    let time = setTimeout(function () {
                                        clearTimeout(time)
                                        $('#search_equip').modal('hide')
                                        this.$router.push('/login')
                                    }, 1000)
                                    $('#msgModal').modal('hide')
                                }, 1000)
                            } else {
                                this.$store.commit('showAlert', {error: data.msg})
                            }
                        }, () => {
                            this.$store.commit('showAlert', {error: this.$msgDictionary.serviceException})
                        })
                }
            },
            //编辑搜到设备的信息
            editSearchEquips () {
                this.equipData.operate = 'edit'
                this.$emit('editEquip', this.equipData)
            },
            deleteEquip () {
                this.equipData.operate = 'delete'
                this.$emit('editEquip', this.equipData)
            },
            showCustomer () {
                let timer = setTimeout(() => {
                    clearTimeout(timer)
                    let time = setTimeout(() => {
                        clearTimeout(time)
                        this.$emit('showUser', this.userInfo)
                    }, 100)
                    $('#search_equip').modal('hide')
                }, 100)
            },
        }
    }
</script>

<style scoped>

    .modal-content {
        width: 750px;
        height: 540px;
    }

    .modal-body {
        padding: 0;
    }

    /* 弹窗左侧设置 */
    .searchFor_left {
        position: relative;
        width: 180px;
        height: 540px;
        background: #263238;
        float: left;
        font-size: 14px;
    }

    .closeBtn {
        position: absolute;
        left: 15px;
        top: 10px;
    }

    .searchFor_left p {
        position: absolute;
        color: rgb(23, 210, 156);
        top: 260px;
        left: 65px;
    }

    /* 弹窗右侧设置 */
    .searchFor_right {
        position: relative;
        width: 570px;
        height: 540px;
        margin-left: 202px;
    }

    .searchFor_right table td span {
        cursor: pointer;
    }

    table {
        font-size: 12px;
    }

    .top_text {
        padding-top: 35px;
        font-size: 12px;
        color: rgb(153, 153, 153)
    }

    .table_box {
        width: 526px;
        overflow: auto;
        height: 200px;
    }

    .table_top {
        width: 526px;
        padding-top: 45px;
        margin-top: 5px;
    }

    .table_nav {
        width: 526px;
        height: 30px;
        background: rgb(240, 240, 240);
        color: rgb(153, 153, 153);
        font-size: 10px;
        text-align: center;
    }

    .table_nav th {
        text-align: center;
        white-space: nowrap;
    }

    .top_text_text {
        margin-top: 20px;
        font-size: 12px;
    }

    .table_content {
        color: rgb(102, 102, 102);
    }

    .table_content td {
        height: 40px;
        line-height: 40px;
        white-space: nowrap;
    }

    .table_button {
        width: 526px;
        margin-top: 3px;
    }

    .dropdown-menu {
        height: 168px;
        right: 0;
        left: auto;
        top: 70%;
        background: #2F3A40;
        min-width: 100px;
        overflow-y: auto;
        color: white;
    }

    .list li:hover, .list li a.active {
        background: #2f3a40;
        border-color: #1A1E20;
        color: black;
    }

    .dropdown-menu > li > a {
        color: white;
    }

    .dropdown-menu > li > a:hover {
        color: #1A1E20;
    }

</style>
